<template>
    <el-container class="home-box">
        <el-aside width="250px">
            <div class="logo-box-script ">
                <div class="logo-box el-icon-s-custom">
                </div>
                <div class="script">电商后台</div>
            </div>
            <el-menu v-bind:default-active= "activepath" unique-opened background-color="rgb(41, 44, 53)" text-color="#fff" active-text-color="#4a7aaa" router>
                <el-submenu :index="item.id + ''" v-for= "item in menulist" :key= 'item.id'>
                    <template slot="title">
                        <i v-bind:class="iconobj[item.id]"></i>
                        <span>{{item.authName}}</span>
                    </template>
                    <el-menu-item v-on:click="saveNavStatus('/' + childitem.path)" v-bind:index=" '/' + childitem.path + ''" v-bind:key='childitem.id' v-for="childitem in item.children">{{childitem.authName}}</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <div class="fr margin-div"></div>
                <span class="el-dropdown-link fr" v-on:click= "logout">
                    <i class="el-icon-switch-button el-icon--right"></i> <span class="sess">     退出登录</span>
                </span>
                <div class="header-hr fr"></div>
                <el-dropdown class="fr ">
                    <span class="el-dropdown-link">
                        <i class="el-icon-setting el-icon--right"></i> <span class="sess">  设置</span>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看资料</el-dropdown-item>
                        <el-dropdown-item>修改用户名</el-dropdown-item>
                        <el-dropdown-item>修改密码</el-dropdown-item>
                        <el-dropdown-item v-bind:disabled='true'>更换头像</el-dropdown-item>
                        <el-dropdown-item divided>注销账号</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <div class="header-hr fr"></div>
                <span class="el-dropdown-link fr">
                    <i class="el-icon-link el-icon--right"></i> <span class="sess">   联系我们</span>
                </span>
                <div class="header-hr fr"></div>
                <span class="el-dropdown-link fr" v-on:click= "toggleaside($event)">
                    <i class="el-icon-s-fold el-icon--right"></i> <span class="sess">     隐藏导航</span>
                </span>
            </el-header>
            <el-header>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data: function () {
        return {
            menulist: [],
            iconobj: {
                125: 'el-icon-user',
                103: 'el-icon-brush',
                101: 'el-icon-goods',
                102: 'el-icon-s-grid',
                145: 'el-icon-pie-chart'
            },
            flag: true,
            activepath: ''
        }
    },
    created () {
        this.getMenuList()
        this.activepath = window.sessionStorage.getItem('activepath')
    },
    methods: {
        logout: function () {
            this.$confirm('此操作将退出用户登录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.$message({
                type: 'success',
                message: '退出成功!'
            })
            window.setTimeout(() => {
                window.sessionStorage.clear()
                location.reload()
            }, 2000)
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消退出'
                })
            })
        },
        getMenuList: function () {
            this.$http.get('menus').then(result => {
                if (result.status !== 200) {
                    this.$message.error(result.data.meta.msg)
                } else {
                    this.menulist = result.data.data
                }
            })
        },
        toggleaside: function (e) {
            if (this.flag) {
            e.target.innerHTML = '显示导航'
            e.target.previousSibling.previousSibling.classList.remove('el-icon-s-fold')
            e.target.previousSibling.previousSibling.classList.add('el-icon-s-unfold')
            document.querySelector('.el-aside').style.width = 0
            this.flag = !this.flag
            } else {
               document.querySelector('.el-aside').style.width = '250px'
                this.flag = !this.flag
                e.target.innerHTML = '隐藏导航'
            e.target.previousSibling.previousSibling.classList.remove('el-icon-s-unfold')
            e.target.previousSibling.previousSibling.classList.add('el-icon-s-fold')
            }
        },
        saveNavStatus: function (activepath) {
            window.sessionStorage.setItem('activepath', activepath)
        }
    }
}
</script>

<style lang="less" scoped>
  .el-header{
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px ;
  }
  .el-aside {
    background-color: rgb(41, 44, 53);
    color: #333;
    text-align: center;
    line-height: 200px;
    transition: all 0.2s ease;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    position: relative;
    overflow: visible;
  }
  .home-box{
      width: 100%;
      height: 100%;
  }
   .el-container .el-header:nth-child(1){
    font-size: 15px;
    color: rgb(153,153, 153);
    background-color: #E9EEF3;
    .margin-div{
    height: 100%;
    width: 30px;
    }
    .sess{
        white-space: pre;
    }
    .el-dropdown-link {
    cursor: pointer;
    // color: #409EFF;
   }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-dropdown{
      font-size: 15px;
      color: rgb(153,153, 153);
  }
  .header-hr{
      width: 0.6px;
      height: 40px;
      background-color: rgb(143, 131, 131);
      margin: 10px 13px;
      opacity: 0.3;
  }
  }
   .el-container .el-header:nth-child(2){
       height: 45px!important;
       background-color:#fff;
       padding-left: 0;
       box-shadow: 0 0px 5px rgb(0, 0, 0,0.15)!important;
  }
  .logo-box-script{
        overflow: hidden;
        display: flex;
  }
  .logo-box{
      color: white;
      font-size: 80px;
      float: left;
      margin: 30px 0 0 30px;
  }
  .logo-box-script .script{
      color: #fff;
      float: left;
      font-size: 20px;
      height: 100%;
      flex: 1;
      line-height: 160px;
  }
  .el-menu-item i, .el-menu-item span{
      float: left;
      line-height:56px ;
  }
  .el-submenu__title i,.el-submenu__title span{
      float: left;
      line-height:56px ;
  }
</style>
